@import "variable";
@import "../../dist/css/sprite";

//头部
.header {
  position: absolute;
  width: 100%;
  height: 50px;
  background: @deepBlue;
  z-index: 101;
  font-size: 14px;
  .header-img {
    float: left;
    width: 180px;
    .line-height(50px);
    text-align: center;
    > img {
    }
  }
  .header-bar {
    position: relative;
    .header-bar-ul {
      > li {
        position: relative;
        float: left;
        //width: 140px;
        .line-height(50px);
        margin: 0 20px;
        padding: 0 5px;
        text-align: center;
        color: #fff;
        transition: .2s;
        cursor: pointer;
        span {
          display: inline-block;
          vertical-align: middle;
        }
        .header-bar-arrow {
          display: inline-block;
          vertical-align: middle;
          .sprite(@aside-arrow);
          margin-left: 10px;
        }
        .header-bar-bottom{
          position: absolute;
          left: 0;
          bottom:0;
          display: block;
          width: 100%;
          height: 3px;
          border-right: 6px solid transparent;
          border-bottom: 3px solid @success-hover;
          border-left: 6px solid transparent;
          .opacity(0);
          transition: .2s;
        }
        &:hover{
          .on;
        }
      }
      .on{
        color: @success-hover;
        .header-bar-bottom{
          .opacity(1);
        }
        .header-bar-arrow {
          .sprite(@aside-arrow-green);
        }
      }
    }
  }
  .header-userinfo {
    float: right;
    position: relative;
    margin-right: 1%;
    line-height: 0;
    > div {
      float: left;
      .line-height(50px);
    }
    .user-img {
      cursor: pointer;
      > span {
        color: #fff;
        vertical-align: middle;
      }
      .user-icon {
        display: inline-block;
        vertical-align: middle;
        .sprite(@default-user-icon)
      }
    }
    .user-login {
      margin-left: 20px;
      > a {
        display: inline-block;
        vertical-align: middle;
        color: #fff;
      }
    }
  }
}



//侧栏和内容区
.main {
  position: absolute;
  width: 100%;
  //min-width: 1200px;
  top: 50px;
  bottom: 0;
  z-index: 100;
}



//侧边菜单
.aside{
  i{
    position: relative;
    .vertical;
    &:before{
      content: '';
      position: absolute;
      top:0;
      left: 0;
      display: block;
      .opacity(0);
      transition: opacity .2s;
      display: none\9;
    }
  }
  .aside-icon1{
    .sprite(@aside-icon1);
    &:before{
      .sprite(@aside-icon1h);
    }
  }
  .aside-icon2{
    .sprite(@aside-icon2);
    &:before{
      .sprite(@aside-icon2h);
    }
  }
  .aside-icon3{
    .sprite(@aside-icon3);
    &:before{
      .sprite(@aside-icon3h);
    }
  }
  .aside-icon4{
    .sprite(@aside-icon4);
    &:before{
      .sprite(@aside-icon4h);
    }
  }
  .aside-icon5{
    .sprite(@aside-icon5);
    &:before{
      .sprite(@aside-icon5h);
    }
  }
  .aside-icon6{
    .sprite(@aside-icon6);
    &:before{
      .sprite(@aside-icon6h);
    }
  }
  .aside-icon7{
    .sprite(@aside-icon7);
    &:before{
      .sprite(@aside-icon7h);
    }
  }
  .aside-icon8{
    .sprite(@aside-icon8);
    &:before{
      .sprite(@aside-icon8h);
    }
  }
  .aside-icon9{
    .sprite(@aside-icon9);
    &:before{
      .sprite(@aside-icon9h);
    }
  }
  .aside-icon10{
    .sprite(@aside-icon10);
    &:before{
      .sprite(@aside-icon10h);
    }
  }
  .aside-icon11{
    .sprite(@aside-icon11);
    &:before{
      .sprite(@aside-icon11h);
    }
  }
  .aside-icon12{
    .sprite(@aside-icon12);
    &:before{
      .sprite(@aside-icon12h);
    }
  }
  .aside-icon13{
    .sprite(@aside-icon13);
    &:before{
      .sprite(@aside-icon13h);
    }
  }
  .aside-icon14{
    .sprite(@aside-icon14);
    &:before{
      .sprite(@aside-icon14h);
    }
  }
  .aside-icon15{
    .sprite(@aside-icon15);
    &:before{
      .sprite(@aside-icon15h);
    }
  }
}
.aside {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 180px;
  background-color: @blue;
  padding-bottom: 25px;
  overflow: hidden;
  z-index: 102;
  transition: .2s;
  .aside-show-btn {
    width: 100%;
    .line-height(30px);
    text-align: center;
    background-color: @lightBlue;
    cursor: pointer;
    .aside-show-btn-icon {
      .sprite(@aside-show-hide);
      transition: .2s;
    }
    .rotate90 {
      transform: rotateZ(90deg);
    }
  }
  .menu {
    height: 100%;
    width: 200px;
    overflow-x: hidden;
    overflow-y: scroll;
    .menu-ul{
      width: 180px;
      padding-bottom: 30px;
      .menu-li-one {
        color: #fff;
        font-size: 14px;
        line-height: 40px;
        transition: .2s;
        background-color: @lightBlue;
        .menu-title {
          position: relative;
          width: 180px;
          line-height: 0;
          >a{
            padding-left: 15px;
            display: block;
            .line-height(40px);
            > span {
              vertical-align: middle;
              user-select: none;
            }
            .aside-menu-arrow {
              .vertical;
              margin-right: 10px;
              .sprite(@aside-arrow);
              transform: rotateZ(-90deg);
              transition: .2s;
            }
          }
        }
        .menu-ul-two {
          display: none;
          transition: .2s;
          .menu-li-two {
            position: relative;
            background-color: @blue;
            line-height: 0;
            > a {
              display: block;
              width: 180px;
              padding-left: 15px;
              .line-height(40px);
              >span{
                .vertical;
                padding-left:14px;
                transition: .2s;
              }
            }
            &:before,&:after {
              content: '';
              position: absolute;
              display: inline-block;
              .opacity(0);
              transition: opacity .2s;
              display: none\9;
            }
            &:before{
              top: 0;
              left: 0;
              .sprite(@aside-greenline);
            }
            &:after{
              top: 12.5px;
              right: 0;
              .sprite(@aside-thisarrow-fff);
            }
            &:hover{
              .on;
              .menu-li-two-menu{
                .opacity(1);
                transform: scaleX(1);
                width: 150px;
              }
            }
          }
          .on{
            &:before,&:after{
              .opacity(1);
              display: block\9;
            }
            >a>i:before{
              .opacity(1);
              display: block\9;
            }
          }
          .aside-thisarrow{
            &:after{
              .sprite(@aside-thisarrow);
            }
          }
        }
        .aside-badge{//侧栏的小徽章提示
          .vertical();
          min-width: 14px;
          .line-height(15px);
          margin-left: 4px;
          padding: 0 3px;
          border-radius: 7px;
          text-align: center;
          font-size: 12px;
          color: #fff;
          background-color: @red;
        }
        .menu-li-one-menu,.menu-li-two-menu{
          position: fixed;
          left: 180px;
          top:0;
          bottom: 0;
          width: 150px;
          padding-top: 50px;
          box-shadow: @out-shadow;
          background-color: @cyan;
          color: #333;
          .opacity(0);
          transform: scaleX(0);
          transform-origin: left;
          width: 0\9;
          overflow: hidden;
          transition:.2s;
          .two-menu-box{
            >p{
              font-size: 16px;
              line-height: 70px;
              padding-left: 20px;
              font-weight: 400;
            }
            >a{
              display: block;
              line-height: 40px;
              padding-left: 30px;
              transition: .2s;
              &:hover{
                background-color: #fff;
              }
            }
          }
        }
        &:hover{
          .menu-li-one-menu{
            .opacity(1);
            transform: scaleX(1);
            width: 150px;
          }
        }
      }
      .menu-ul-two-show{
        .menu-title{
          >a{
            .aside-menu-arrow{
              transform: rotateZ(0);
            }
          }
        }
        .menu-ul-two{
          display: block;
        }
      }
    }
  }
}
.aside-hide {
  width: 50px;
  .menu {
    .menu-ul {
      width: 50px;
      .menu-li-one {
        .menu-title {
          width: auto;
          text-align: center;
          >a{
            padding: 0;
            width: 50px;
            > span {
              display: none;
            }
            .aside-menu-arrow {
              margin-right: 0;
            }
          }
        }
        .menu-ul-two {
          .menu-li-two {
            > a {
              width: auto;
              padding-left: 0;
              text-align: center;
              span {
                display: none;
              }
            }
          }
        }
        .aside-badge{
          position: absolute;
          top: 5px;
          right: 0;
        }
        .menu-li-one-menu,.menu-li-two-menu{
          left: 50px;
        }
      }
    }
  }
}



//主要内容区
.main-body {
  position: absolute;
  width: 100%;
  padding-left: 180px;
  overflow: hidden;
  z-index: 100;
  top: 0;
  bottom: 0;
  transition: .2s;
  .content {
    float: left;
    width: 100%;
    height: 100%;
    overflow: auto;
    .min-content{
      padding: 20px 30px;
      min-width: 1100px;
    }
    .com-title {
      position: relative;
      height: 30px;
      font-size: 19px;
      letter-spacing: 1px;
      line-height: 30px;
      margin-bottom: 20px;
      padding-left: 10px;
      border-left: 6px solid @green;
      vertical-align: middle;
    }
  }
}
.com-form-group {
  position: relative;
  padding:10px 30px 10px 0;
  border: 1px solid #f5f5f5;
  box-shadow: 0 0 20px 5px rgba(0,0,0,.1);
  border-radius: 8px;
  margin-bottom: 20px;
  >form{
    position: relative;
  }
  .com-form-input {
    float: left;
    width: 92%;
    .layui-form-item{
      float: left;
      width: 300px;
      margin: 7px 0;
      font-size: 16px;
      clear: none;
      .layui-form-label{
        width: 90px;
        padding: 9px 0;
        text-align: right;
      }
      .layui-input-block{
        margin-left: 100px;
        font-size: 14px;
      }
    }
  }
  .com-form-btn{
    position: absolute;
    right: 0;
    bottom: 9px;
  }

}
.com-btn-group {
  margin-bottom: 10px;
  >button{
    margin-right: 15px;
  }
}
.com-table-group {
  overflow: auto;
  .com-table {
    width: 100%;
    line-height: 44px;
    font-size: 14px;
    border-spacing: 0;
    background-color: #fff;
    border-bottom: 1px solid #b3b3b3;
    tr{
      td>span {
        display: block;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        padding: 0 4px;
        > input[type=checkbox] {
          vertical-align: middle;
        }
      }
    }
    .thead {
      tr {
        background-color: @green;
        color: #fff;
        text-align: center;
        td:first-child {
          min-width: 30px;
        }
        td+td{
          border-left: 1px solid #fff;
        }
      }
    }
    .tbody {
      tr:nth-child(2n) {
        background-color: #f5f5f5;
      }
      .tr2{
        background-color: #f9f9f9;
      }
      tr {
        border-top: 1px solid #fff;
        border-bottom: 1px solid #f5f5f5;
        transition:background-color .2s;
        &:hover{
          background-color: @gray-lighter;
          border-bottom: 1px solid @gray-lighter;
        }
        td:first-child {
          min-width: 30px;
          text-align: center;
          .border-gray{
            border-left: 2px solid @gray-light;
          }
          .border-green{
            border-left: 2px solid @green;
          }
        }
        td {
          .opt-time{
            position: relative;
            width: 85px;
            margin: 0 auto;
            >span{
              float: left;
              margin-right: 5px;
            }
            >cite{
              display: block;
              font-size: 12px;
              line-height: 22px;
            }
          }
          .tbody-img{
            img{
              display: block;
              width: 40px;
              height: 40px;
              margin: 0 auto;
              cursor: pointer;
            }
          }
        }
        .limit-words-more {
          max-width: 145px;
          margin: 0 auto;
        }
        .limit-words-less{
          max-width: 100px;
          margin: 0 auto;
        }
      }
    }
    .log-tbody{
      line-height:85px;
    }
  }
}
.com-paging {
  text-align: right;
}
.main-body-hide {
  padding-left: 50px;
}

//选项卡
.com-tab{
  .com-tab-btns{
    margin-bottom: 10px;
    .tab-btn{
      float: left;
      padding: 10px;
      font-size: 16px;
      border-bottom: 2px solid @gray-light;
      margin-right:10px;
      cursor: pointer;
      user-select: none;
    }
    .this-btn{
      border-top: 4px solid @green;
      border-left: 1px solid @green;
      border-right: 1px solid @green;
      border-bottom:none;
      color: @green;
    }
  }
  .com-tab-contents{
    position: relative;
    .tab-content{
      display: none;
    }
  }
}

//货品信息的共同样式
.com-info-text{
  font-size: 14px;
  .com-info-item{
    margin-bottom: 20px;
    .com-info-label{
      float: left;
      width: 50%;
      text-align: justify;
      sub{
        display: inline-block;
        width: 10px;
        vertical-align: top;
        color: #ff0000;
      }
      >span:nth-child(1){
        display: inline-block;
        width: 90px;
        cite{
          display: inline-block;
          width: 60px;
          text-align: justify;
          text-align-last:justify;
        }

      }
    }
    .com-info-describe{
      width: 100%;
      >span{
        line-height: 28px;
        float: left;
      }
      >span:nth-child(2){
        width: 525px;
      }
    }
  }
}

//信息审核的共同样式
.com-inputs-info{
  padding: 20px 30px 0;
  .layui-form-item{
    font-size: 14px;
    margin-bottom: 5px;
    .layui-form-label{
      padding: 0;
      width: 100px;
      text-align: left;
      sub{
        vertical-align: top;
        color: #ff0000;
        margin-right: 5px;
      }
    }
    .layui-input-block{
      .layui-form-radio{
        margin: 0;
      }
    }
    .img-group{
      >img{
        display: block;
        float: left;
        width: 80px;
        height: 80px;
        margin-right: 10px;
      }
    }
  }
}

//详情内的表格样式
.detail-table-group{
  margin: 10px 0;
  overflow: auto;
  .detail-tip{
    position: relative;
    font-size: 14px;
    line-height: 28px;
    font-weight: 600;
    padding-left: 10px;
    &:before{
      content: '';
      display: block;
      position: absolute;
      top: 4px;
      left: 0;
      width: 4px;
      height: 20px;
      background-color: @green;
    }
  }
}
.detail-table{
  width: 100%;
  line-height: 30px;
  border-spacing: 0;
  text-align: center;
  border: 1px solid #fff;
  .detail-thead{
    tr{
      background-color: @green;
      font-size: 14px;
      color: #fff;
      td+td{
        border-left: 1px solid #fff;
      }
    }
  }
  .detail-tbody{
    tr:nth-child(2n+1){
      background-color: @gray-lighter;
    }
    tr{
      td:last-child{
        min-width: 100px;
        span{
          display: block;
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
        }
      }
      td{
        .tbody-img{
          img{
            display: block;
            height: 28px;
            margin: 0 auto;
          }
        }
      }
      .limit-words{
        max-width: 240px;
        cursor: pointer;
        user-select: none;
      }

    }
  }
}

//自动完成的效果css
.autocompleter {
  display: none;
  width: 100%;
  position: absolute;
  top: 38px;
  left: 0;
  z-index: 100;
  background-color: #fff;
  .autocompleter-list {
    border: 1px solid #e6e6e6
  }
  .autocompleter-item-selected {
    background: @green;
    color: #fff;
  }
  .autocompleter-item {
    padding: 0 10px;
    line-height: 36px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    cursor: pointer;
    transition: .2s;
    &:hover {
      .autocompleter-item-selected;
    }
  }
}
.autocompleter-hint {
  display: none;
  position: absolute;
  top: -36px;
  left: 0;
  width: 100%;
  padding-left: 15px;
  .line-height(38px);
  color: #ccc;
  span {
    .opacity(0);
  }
}
.autocompleter-hint-show,
.autocompleter-show{
  display: block;
}
.autocompleter-closed {
  display: none;
}
.com-form-content{
  font-size: 14px;
  padding: 20px 30px 0;
  .layui-form-item{
    .layui-form-label{
      padding-left: 0;
      padding-right: 0;
    }
  }
}

#allocate-table{
  display: none;
}
.com-allocate{
  position: relative;
  .com-allocate-title{
    font-size: 16px;
    line-height: 30px;
  }
  .com-tree{
    float: left;
    width: 40%;
  }
  .com-table-group{
    float: left;
    width: 60%;
  }
}